/*
* 卡片区域
*/
.f-form-ctr {
  padding: $farris-split-setcion-inner-gutter-y $farris-split-setcion-inner-gutter-x 0.25rem;
  display: block; // 组件本身位于其他组件内无高度问题
}

/*******************************
         表单布局
*******************************/
.f-section-form {
  &.#{$f-section-prefix} {
    padding: $f-section-form-inner-gutter;
  }

  .#{$f-section-prefix}-header {
    padding: 0 $farris-split-setcion-inner-gutter-x;
    margin-bottom: 0.875rem;
  }

}

.f-form-layout {
  display: flex;
  flex-wrap: wrap;

  .f-section-formgroup {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

// 分组
.f-section-formgroup {

  .f-section-formgroup-legend {
    width: 100%;
  }

  &-legend {
    @include f-header-flex;

    .f-header {
      @include f-header-flex;
      justify-content: flex-start;
      color: $farris-formgroup-legend-title-color;
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: auto;
      padding: $f-form-ctr-formgroup-legend-inner-gutter;
      cursor: pointer;
      font-size: $farris-formgroup-legend-text-size;
    }

    .f-toolbar {
      justify-content: flex-start;

      .btn {
        border: none;
        display: flex;
        align-items: center;
        font-size: 13px;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
      }
    }

    .f-btn-collapse-expand {
      color: $farris-formgroup-legend-title-color;

      &::after {
        margin: 0;
        font-size: 14px;
      }
    }

    &:hover {

      .f-title,
      .f-toolbar .f-btn-collapse-expand {
        color: $farris-formgroup-legend-title-hover-color;
      }
    }

    &:active {

      .f-title,
      .f-toolbar .f-btn-collapse-expand {
        color: $farris-formgroup-legend-title-active-color;
      }
    }
  }

  &-legend {
    &.legend-with-toolbar {
      height: 2rem;

      .f-header {
        @include f-header-flex;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
        border: 1px solid $farris-formgroup-legend-with-toolbar-border-color;
        padding: $f-form-ctr-formgroup-legend-inner-gutter;
        height: $farris-formgroup-legend-height;
        background: $farris-formgroup-legend-with-toolbar-bg;
      }

      .f-title {
        font-size: 0.875rem;
        color: $farris-formgroup-legend-with-toolbar-title-color;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        cursor: pointer;
      }
    }
  }


  &-inputs {
    display: flex;
    flex-wrap: wrap;
  }

  &.f-state-collapse {
    .f-section-formgroup-inputs {
      display: none;
    }
  }

  // 分组与分组的间距
  +.f-section-formgroup {
    margin: $f-pt-card-one-section-outer-gutter 0 0; 
  }
}